<template>
	<view class="panel">
		<view class="plnl">
			<view class="plbx flex">
				<image class="img shrink0" src="../../static/logo.png"></image>
				<view class="w-100 flex justify-between ml-20 align-center">
					<view>肩颈护理10次</view>
					<view>￥200</view>
				</view>
			</view>
			<u-form :model="model1" :rules="rules" ref="form1" errorType="toast">
				<u-form-item label="用户" prop="user" borderBottom @click="showUser = true" ref="item1">
					<u-input v-model="model1.user" disabled disabledColor="#ffffff" inputAlign="right"
						placeholder="请选择用户" border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" prop="remarks" borderBottom ref="item1">
					<u-input v-model="model1.remarks" border="none" inputAlign="right" placeholder="备注"></u-input>
				</u-form-item>
			</u-form>
			<view class="mt-100">
				<u-button type="primary" size="large" text="确认支付" @click="submit"></u-button>
			</view>
		</view>
		<u-picker :show="showUser" :columns="actions" keyName="name" @cancel="showUser = false" @confirm="userSelect"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUser: false,
				model1: {
					remarks: '',
					user: '',
					userId: ''
				},
				rules: {
					'user': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择用户',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				actions: [[{
						name: '用户1',
						id: '1'
					},
					{
						name: '用户2',
						id: '2'
					},
					{
						name: '用户3',
						id: '3'
					},
					{
						name: '用户4',
						id: '4'
					},
					{
						name: '用户5',
						id: '5'
					},
					{
						name: '用户6',
						id: '6'
					}
				]],
			}
		},
		methods: {
			userSelect(e) {
				this.model1.user = e.value[0].name
				this.model1.userId = e.value[0].id
				this.showUser = false
			},
			submit(){
				this.$refs.form1.validate().then(res=>{
					console.log(this.model1)
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.panel {
		.plnl {
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.plbx {
				.img {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}


	}
</style>
